<template>
  <a-tabs v-model:activeKey="activeKey" @change="tabChange">
    <a-tab-pane v-for="item in tabList" :key="item.value" :tab="item.label"></a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  type TabList = {
    label: string
    value: string
  }

  export interface Props {
    tabList: TabList[]
  }

  defineProps<Props>()

  const emit = defineEmits(['tab-change'])

  const activeKey = ref<string>('air')

  const tabChange = () => {
    emit('tab-change', activeKey.value)
  }
</script>

<style lang="less" scoped>
  .ant-tabs {
    margin-bottom: 4px;
    :deep(.ant-tabs-nav) {
      margin-bottom: 4px;
      padding-left: 20px;
      &::before {
        border: unset;
      }
      .ant-tabs-tab-active {
        font-weight: 600;
      }
      .ant-tabs-tab {
        padding: 0 0 3px 0;
      }
      .ant-tabs-ink-bar {
        height: 4px;
        background-color: #00f5ff;
      }
    }
  }
</style>
